<template>
	<div class="wrapper">
		<div class="dia" style="flex-direction: column;">
			<div class="dis logo">
				<img src="/src/assets/terminal/logo.png" alt="" />
			</div>
			<span style="text-align: center;" class="main_font">众成智付</span>
		</div>
		<img src="/src/assets/terminal/bac_invate.png" alt="" class="invate" />

		<div class="btn_box">
			<div class="btn dis" @click="downloadFile">
				立即下载
			</div>
		</div>
		<div class="direct" v-if="surroundings">
			<img src="/src/assets/terminal/guide.png" alt="" @click="downloading" />
		</div>
	</div>
</template>

<script>
	// import {
	// 	findSetPosFeeList
	// } from '@/api/posManagement'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	import axios from 'axios';
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue';
	export default defineComponent({
		name: 'sateActive',
		setup() {
			// const router = useRouter()
			const state = reactive({
				surroundings: false
			})
			const downloading = () => {
				state.surroundings = false
			}
			const downloadFile = () => {
				const userAgent = navigator.userAgent;
				let isAndroid = false;
				let isIOS = false;

				if (/Android/i.test(userAgent)) {
					isAndroid = true;
				} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
					isIOS = true;
				}

				if (isAndroid) {
					console.log('这是安卓设备');
					//判断是不是微信
					var ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						state.surroundings = true
						return
					}
					let apkUrl = 'https://mtpospay.com/apk/lianzhongbao.apk'
					// const apkUrl = '你的 APK 下载链接';
					const link = document.createElement('a');
					link.href = apkUrl;
					link.setAttribute('download', 'app.apk');
					document.body.appendChild(link);
					link.click();


				} else if (isIOS) {
					console.log('这是苹果设备');
					var ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						state.surroundings = true
						return
					}
					window.location.href = 'https://itunes.apple.com/cn/app/id6499582093'
				} else {
					console.log('无法确定设备类型');
					var ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						state.surroundings = true
						return
					}
					let apkUrl = 'https://mtpospay.com/apk/lianzhongbao.apk'
					// const apkUrl = '你的 APK 下载链接';
					const link = document.createElement('a');
					link.href = apkUrl;
					link.setAttribute('download', 'app.apk');
					document.body.appendChild(link);
					link.click();
				}


			}


			return {
				...toRefs(state),
				downloadFile,
				downloading
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100vh;
		background-image: url('../../assets/terminal/invite_bac.png');
		background-size: 100% 41%;
		background-repeat: no-repeat;
		padding-top: 78px;

		.invate {
			margin-top: 68px;
			width: 260px;
			height: 280px;
		}

		.main_font {
			font-size: 18px;
			margin-top: 12px;
		}

		.btn_box {
			position: absolute;
			bottom: 8%;
			left: 50%;
			transform: translateX(-50%);

			.btn {
				width: 174px;
				height: 48px;
				background: linear-gradient( 180deg, #EA0249 0%, #D00123 100%);
				border-radius: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 16px;
				color: #FFFFFF;
			}
		}

		img {
			width: 104px;
			height: 104px;
		}

		.direct {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.8);
			position: absolute;
			top: 0;

			img {
				width: 100%;
				height: 74vh;
			}
		}

		.dis {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.dia {
			display: flex;
			align-items: center;
		}
	}
</style>